<template>
    <el-icon size="30px" @click="visible = true">
        <Edit />
    </el-icon>
    <el-dialog v-model="visible" :close-on-click-modal="false" :close-on-press-escape="false" >
        <el-form ref="dataFormRef" label-width="120px" :v-model="roomMsgCopy">
            <el-form-item label="房间简介" prop="info">
                <el-input type="textarea" v-model="roomMsgCopy.info"></el-input>
            </el-form-item>
            <el-form-item label="房间公告" prop="notice">
                <el-input type="textarea" v-model="roomMsgCopy.notice"></el-input>
            </el-form-item>
            <el-form-item label="直播间封面" prop="coverId">
                <addFile ref="url" v-model="roomMsgCopy.url"></addFile>
            </el-form-item>
            <el-form-item label="是否禁播" prop="status">
                <el-switch v-model="roomMsgCopy.status" inline-prompt active-text="否" inactive-text="是" size="large" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="visible = false" style="margin-right: 10px;">取消</el-button>
                <el-button type="primary" @click="updateroom">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted ,inject} from "vue";
import { Edit } from "@element-plus/icons-vue";
import { updateLiveRoom } from "@/service/api";
import addFile from "../../components/addFile.vue";
const props = defineProps({
    roomMsg: Object
})

const roomMsgCopy = ref<any>({})
onMounted(() => {
    roomMsgCopy.value = { ...props.roomMsg }
})

const url = ref(roomMsgCopy.value.url)
const visible = ref(false);
const getLiveRoomList = inject<any>('getLiveRoomList')


const updateroom = async () => {
    try {
        const {id ,info ,notice}=roomMsgCopy.value;
        let statusValue = 0;
        if (roomMsgCopy.value.status === false) {
            statusValue = 1;
        }
        const res = await updateLiveRoom({id,info,coverId:url.value.coverId,notice,status:statusValue});
        console.log("调用updateroom成功:", res);
        // 更新成功后的逻辑
        getLiveRoomList()
        visible.value = false; // 关闭对话框
    } catch (error) {
        console.log("更新房间失败"+error);
    }
};


</script>

<style scoped lang="less">
.avatar-uploader {
    :deep(.avatar) {
        width: 178px;
        height: 178px;
        display: block;
    }

    :deep(.el-upload) {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    :deep(.el-upload:hover) {
        border-color: var(--el-color-primary);
    }

    :deep(.el-icon.avatar-uploader-icon) {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
}
</style>
